<template>
  <div class="user-management-container">
    <!-- 头部标题 -->
    <div class="header">
      <span class="title">信息管理</span>
    </div>

    <!-- 查询条件卡片 -->
    <el-card class="search-card">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="用户姓名：">
          <el-input
              v-model="searchForm.name"
              placeholder="请输入用户姓名"
              clearable
              style="width:200px"
          />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
              v-model="searchForm.phone"
              placeholder="请输入手机号"
              clearable
              style="width:200px"
          />
        </el-form-item>
        <el-form-item label="渠道来源" style="width:290px;">
          <el-select placeholder="渠道选择" v-model="searchForm.status" @change="loadCategories">
            <el-option label="全部" value="" />
            <el-option label="APP" value="" />
            <el-option label="小程序" value="" />
            <el-option label="支付宝" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-date-picker
              v-model="searchForm.registerTime"
              type="daterange"
              range-separator="→"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width:300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户列表表格 -->
    <el-card class="table-card">
      <el-table :data="userList" stripe border>
        <el-table-column
            prop="id"
            label="编号"
            width="130"
            align="center"
        />
        <el-table-column
            prop="name"
            label="昵称"
            align="center"
            width="150"
        />
        <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="120"
        />
        <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            width="208"
        />
        <el-table-column
            prop="account"
            label="账号"
            align="center"
            width="150"
        />
        <el-table-column
            prop="tags"
            label="用户标签"
            align="center"
            width="150"
        >
          <template #default="{ row }">
            <el-button type="text" @click="showUserTags(row)">查看({{ row.tagCount || 0 }})</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="registerType"
            label="注册渠道"
            align="center"
            width="120"
        />
        <el-table-column
            prop="lastLoginTime"
            label="最近登录时间"
            align="center"
            width="200"
        />
        <el-table-column
            prop="registerTime"
            label="注册时间"
            align="center"
            width="200"
        />
        <el-table-column
            label="操作"
            align="center"
            width="110"
            fixed="right"
        >
          <template #default="{ row }">
            <el-button type="primary" link @click="showUserDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          class="pagination"
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </el-card>

    <!-- 用户详情对话框 -->
    <el-dialog
        title="用户详情"
        v-model="detailDialogVisible"
        width="60%"
    >
      <div v-if="currentUser" class="user-detail">
        <div class="basic-info">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户ID">{{ currentUser.id }}</el-descriptions-item>
            <el-descriptions-item label="注册渠道">{{ currentUser.registerScope }}</el-descriptions-item>
            <el-descriptions-item label="账户状态">{{ currentUser.accountStatus }}</el-descriptions-item>
            <el-descriptions-item label="用户昵称">{{ currentUser.userLevel }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{ currentUser.registerTime }}</el-descriptions-item>
            <el-descriptions-item label="会员等级">{{ currentUser.memberLevel }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="section">
          <h3>基础信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="真实姓名">{{ currentUser.realName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ currentUser.gender }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ currentUser.phone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="常用地址">{{ currentUser.address || '-' }}</el-descriptions-item>
            <el-descriptions-item label="职业">{{ currentUser.job|| '-' }}</el-descriptions-item>
            <el-descriptions-item label="婚姻">{{ currentUser.married || '-' }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ currentUser.email || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="section">
          <h3>平台属性</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="注册日期">{{ currentUser.registerDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="最近登录时间">{{ currentUser.lastLoginTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="激活日期">{{ currentUser.cancelDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="用户来源">{{ currentUser.userType || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="section">
          <h3>操作记录</h3>
          <el-table :data="operationRecords" border>
            <el-table-column prop="time" label="注册时间" width="180" />
            <el-table-column label="操作" width="100">
              <template #default>
                <el-button type="text">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 用户标签对话框 -->
    <el-dialog
        title="用户标签"
        v-model="tagDialogVisible"
        width="40%"
    >
      <div v-if="currentUser">
        <el-tag
            v-for="(tag, index) in userTags"
            :key="index"
            type="info"
            style="margin-right: 10px; margin-bottom: 10px;"
        >
          {{ tag }}
        </el-tag>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  name: '',
  phone: '',
  source: '',
  registerTime: []
})

// 用户列表数据
const userList = ref([
  {
    id: '5094',
    name: '小冯',
    gender: '男',
    phone: '123',
    account: '小冯',
    tags: ['活跃用户', '高频访问', 'VIP'],
    tagCount: 3,
    registerType: '未知',
    lastLoginTime: '2024-06-07 16:02:13',
    registerTime: '2024-06-07 16:02:13',
    registerScope: '小程序',
    accountStatus: '跳转',
    userLevel: '第三',
    memberLevel: '黄金',
    realName: '冯某某',
    address: '北京市朝阳区',
    job:'程序员',
    married:'已婚',
    email: 'fengxx@example.com',
    registerDate: '2022-11-08 14:00',
    cancelDate: '2022-11-11 11:00',
    userType: '好友查询'
  },
  {
    id: '5095',
    name: '小李',
    gender: '男',
    phone: '123456',
    account: '小李',
    tags: ['新用户', '潜在VIP'],
    tagCount: 2,
    registerType: '未知',
    lastLoginTime: '2024-06-05 16:06:22',
    registerTime: '2024-06-05 16:06:22',
    registerScope: 'APP',
    accountStatus: '正常',
    userLevel: '第一',
    memberLevel: '白银',
    realName: '李某某',
    address: '上海市浦东新区',
    job:'工人',
    married:'未婚',
    email: 'lixxx@example.com',
    registerDate: '2023-08-08 14:00',
    cancelDate: '2023-11-11 11:00',
    userType: '好友查询'
  },
  {
    id: '5096',
    name: '小周',
    gender: '男',
    phone: '10701501212',
    account: '小周',
    tags: ['沉默用户', '待激活'],
    tagCount: 2,
    registerType: '未知',
    lastLoginTime: '2024-06-05 10:19:24',
    registerTime: '2024-06-05 10:19:24',
    registerScope: '支付宝',
    accountStatus: '不活跃',
    userLevel: '第二',
    memberLevel: '普通',
    realName: '周某某',
    address: '广州市天河区',
    job:'白领',
    married:'已婚',
    email: 'zhoux@example.com',
    registerDate: '2024-10-08 10:00',
    cancelDate: '2024-11-11 13:00',
    userType: '好友查询'
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 3
})

// 用户详情相关
const detailDialogVisible = ref(false)
const currentUser = ref(null)
const operationRecords = ref([
  { time: '2021-06-07 10:02:13' },
  { time: '2022-06-05 10:06:02' },
  { time: '2024-06-05 10:19:24' }
])

// 用户标签相关
const tagDialogVisible = ref(false)
const userTags = ref([])

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  // 这里可以添加API调用
  console.log('搜索条件:', searchForm)
  ElMessage.success('查询成功')
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  searchForm.phone = ''
  searchForm.source = ''
  searchForm.registerTime = []
  handleSearch()
}

// 显示用户详情
const showUserDetail = (user) => {
  currentUser.value = user
  detailDialogVisible.value = true
}

// 显示用户标签
const showUserTags = (user) => {
  userTags.value = user.tags || []
  tagDialogVisible.value = true
}

// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  // 这里可以添加数据重新加载逻辑
}

// 页码变化
const handlePageChange = (val) => {
  pagination.currentPage = val
  // 这里可以添加数据重新加载逻辑
}
</script>

<style scoped>
.user-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
}

.header {
  height: 60px;
  background-color: #fff;
  padding: 10px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .title {
  font-size: 20px;
  line-height: 40px;
}

.search-card {
  margin-bottom: 20px;
}

.search-card .el-form-item {
  margin-bottom: 0;
}

.table-card {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.user-detail {
  padding: 10px;
}

.user-detail h3 {
  margin: 20px 0 10px 0;
  color: #303133;
}

.section {
  margin-top: 20px;
}
</style>